<template>
	<!-- 角色列表页面 -->
	<echelon-solutions>
		<!-- 这里是顶部导航栏 -->
		<skyline-navigation title="个人设置"> </skyline-navigation>
		<!-- 这里是中间区域 -->
		<central-hub>

			<view style="padding: 5px;box-sizing: border-box;" class="flex-column flexGap">
				<!-- 使用自定义表格组件 -->
				<MyTreeTable :columns="columnsData" :data-source="sourceData" style="zoom: .7;">
					<!-- 自定义操作列 -->
					<template #operate="{ data }">
						<view class="flexGap">
							<button @click="handleSearch(data)">账单</button>
							<button type="primary" @click="handleEdit(data)" v-if="has('/bill/accounts/updateAccountAndUserInfo')">编辑</button>
						</view>
					</template>
				</MyTreeTable>
				<MyPopup v-model="popupVisible">
					<MyForm :fields="formFields" @submit="submit" submit-text="修改" :filters="['parent_id','id']">
					</MyForm>
				</MyPopup>
			</view>
		</central-hub>
	</echelon-solutions>
</template>

<script>
	import {
		GetAccounts
	} from '../../services/base/bill/test.js';
	export default {
		methods: {
			handleEdit(data) {
				this.formFields.forEach(it => {
					it.value = data[it.name];
				});
				this.popupVisible = true;
			},
			submit(formData) {
				this.$postPublic(['account', 'updateAccountAndUserInfo', 'post'], formData, async () => {
					this.reloadGenerate();
				})
			},
			handleSearch(data) {
				this.$record.navigateTo({
					url: '/pages/detail/list?data=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			// 删除
			handleDelete(data) {
				this.$removePublic('account', data, async () => {
					this.reloadGenerate();
				});
			},
			handleFixed() {
				const lastColumn = this.columnsData[this.columnsData.length - 1];
				this.$set(lastColumn, 'fixed', lastColumn.fixed ? '' : 'right');
			},
			// 定义一个函数，用于查找具有 showChildren 为 true 的节点的 id
			findIdsWithShowChildren(data, newData) {
				if (data.length === 0) return newData;
				let result = []; // 用于存储符合条件的节点的 id

				// 定义一个递归函数，用于遍历数据结构并查找符合条件的节点
				function traverse(node) {
					if (node.showChildren) { // 如果当前节点的 showChildren 为 true，则将其 id 加入结果数组
						result.push(node.id);
					}

					if (node.children && node.children.length > 0) { // 如果当前节点有子节点，则递归遍历子节点
						node.children.forEach(child => traverse(child));
					}
				}
				// 对输入的数据进行遍历，调用 traverse 函数查找符合条件的节点
				data.forEach(item => traverse(item));
				// 定义递归函数，遍历数据结构并修改符合条件的节点的 showChildren 值为 true
				function modifyShowChildrenById(node, id) {
					if (node.id === id) {
						node.showChildren = true;
						return true;
					} else if (node.children && node.children.length > 0) {
						for (let i = 0; i < node.children.length; i++) {
							if (modifyShowChildrenById(node.children[i], id)) {
								return true;
							}
						}
					}
					return false;
				}

				// 定义函数，根据给定的 id 数组修改数据结构中相应节点的 showChildren 值为 true
				function modifyShowChildrenByIdArray(data, idArray) {
					idArray.forEach(id => modifyShowChildrenById(data[0], id));
					return data;
				}
				return modifyShowChildrenByIdArray(newData, result); // 返回符合条件的节点的 id 数组
			},
			generateFormFields(fields) {
				return fields.filter(field => field);
			},
			async reloadGenerate(flag, parent_id) {
				// 生成表单列表
				const generateFormField = (label, type, name, value = "", required = true, disabled = false, date =
					false,
					options) => {
					return {
						label,
						type,
						name,
						value,
						required,
						disabled,
						date,
						options
					};
				};

				const {
					children,
					...account
				} = await this.$listPublic('account');
				this.sourceData = [account];
				const fields = [
					generateFormField("ID", "text", "id", '', true, true),
					generateFormField("账号", "text", "username", '', true, false),
					generateFormField("密码", "password", "password", "", true, false),
					generateFormField("用户名", "text", "name", "", true),
					generateFormField("手机号", "text", "phone", "", false),
					generateFormField("邮箱", "text", "email", "", false),
					generateFormField("性别", "text", "gender", "", false),
					generateFormField("年龄", "text", "age", '', false),
					generateFormField("地址", "text", "address", "", false),
				];
				const myColumns = (columnData) => {
					return columnData.map(data => {
						const [title, key, fixed] = data.split(',');
						const column = {
							title,
							key
						};
						if (fixed) {
							column.fixed = fixed;
						}
						return column;
					});
				}
				this.formFields = [...this.generateFormFields(fields)]; // 表单列表 
				let servers = [];
				const columns = [
					'ID,id,left',
					'账号,username',
					'用户名,name', '管理地址,address',
					'手机号,phone', '操作,operate,right'
				];
				this.columnsData = myColumns(columns); // 生成表头 
				this.popupVisible = flag;
			}
		},
		async onLoad() {
			this.reloadGenerate();
		},
		data() {
			return {
				popupVisible: false,
				formFields: [],
				columnsData: [],
				sourceData: [],
				submitText: ''
			}
		}
	}
</script>
<style scoped>
	.w30 {
		width: 30%;
	}
</style>